<template>
  <div v-loading="loading">
    <el-card class="tab-container">
      <el-tabs v-model="activeName" @tab-click="handleTabsClick">
        <el-tab-pane label="资源列表" name="LIST" />
        <el-tab-pane label="资源等级" name="LEVEL" />
      </el-tabs>
    </el-card>

    <!-- 已开通 start-->
    <div class="shop-container">
      <!-- left 列表 -->
      <div class="left-container">
        <div class="menu-box">
          <div class="content">
            <el-button
              type="text"
              size="small"
              round
              icon="el-icon-plus"
              class="add-btn"
              @click="addResource"
            >新增{{ activeName === "LIST" ? "资源" : "等级" }}</el-button>
            <div
              v-for="item in list"
              :key="item.shopId"
              :class="[item.shopId === activeStore.shopId ? 'active' : '']"
              class="item"
              :title="'id:' + item.shopId"
              @click="clickMenu(item)"
            >
              {{ item.name }}
              <span
                v-if="item.disabled"
                class="app-text-color-danger"
              >(已关停)</span>
              <span
                v-if="!item.disabled && item.status === 0"
                class="app-text-color-danger"
              >(休息中)</span>
            </div>
          </div>
        </div>
      </div>

      <!--  right 配置 -->
      <div class="right-container app-main-content-box">
        <template v-if="oprType === OPR_TYPE.LIST">
          <list-table
            v-if="activeName === 'LIST'"
            :shop-id="activeStore.shopId"
            @edit="handleEdit"
          />
          <level-table
            v-else
            :shop-id="activeStore.shopId"
            @edit="handleEdit"
          />
        </template>
        <template v-else>
          <edit-form-data
            v-if="activeName === 'LIST'"
            :opr-type="oprType"
            :shop-id="activeStore.shopId"
            :shop-list="list"
            :detail-id="editForm.id"
            @on-list-go-back="
              oprType = OPR_TYPE.LIST;
              activeName = 'LIST';
            "
          />
          <edit-level-form-data
            v-else
            :opr-type="oprType"
            :shop-id="activeStore.shopId"
            :shop-list="list"
            :detail-id="editForm.id"
            @on-list-go-back="
              oprType = OPR_TYPE.LIST;
              activeName = 'LEVEL';
            "
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { storeList } from '@/api/reservation'
import listTable from './listTable'
import levelTable from './levelTable'
import { OPR_TYPE } from '@/views/wxaReservationModule/views/resourceManage/config'
import editFormData from './editListTableFormData'
import editLevelFormData from './editLevelTableFormData'
export default {
  components: { listTable, levelTable, editFormData, editLevelFormData },
  data() {
    return {
      // 状态
      loading: false,
      filterVal: '',
      activeStore: {
        shopId: null
      },
      list: [],
      activeName: 'LIST',
      oprType: OPR_TYPE.LIST,
      OPR_TYPE,
      editForm: {}
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  watch: {
    'activeStore.shopId'(val) {
      if (val) {
        this.getDetail(val)
      }
    }
  },
  created() {},
  mounted() {
    // 获取数据
    this.fetchData()
  },
  methods: {
    // ----tabs----
    handleTabsClick() {
      this.oprType = OPR_TYPE.LIST
      this.getDetail(this.activeStore.shopId)
    },
    // ----tabs----
    /**
     * 数据组
     */
    // 获取数据
    fetchData() {
      this.loading = true
      Promise.all([this.getShopList()])
        .then(() => {})
        .finally(() => {
          this.loading = false
        })
    },
    getDetail(value) {
      console.log(value)
    },
    // 选择门店
    clickMenu(item) {
      this.activeStore = item
      this.oprType = OPR_TYPE.LIST
      this.editForm = {}
    },

    // 获取门店列表
    getShopList(mode = null) {
      return new Promise((resolve, reject) => {
        storeList()
          .then((res) => {
            this.list = res.data
            if (res.data.length > 0) {
              if (mode === 'add') {
                this.activeStore = res.data[res.data.length - 1]
              } else if (!this.shopId) {
                this.activeStore = res.data[0]
              }
            }
          })
          .catch(() => {})
          .finally(() => {
            resolve()
          })
      })
    },

    // 新增资源
    addResource() {
      console.log(this.list, this.activeStore)
      const data = this.list.find(item => {
        return item.id === this.activeStore.id
      })
      if (data.disabled === 1) {
        this.$confirm('此店铺已关停', '提示', {
          confirmButtonText: '前往设置',
          cancelButtonText: '我知道了',
          type: 'warning'
        }).then(() => {
          const params = {
            id: this.activeStore.shopId
          }
          this.$router.push({
            name: 'BusinessStoreEdit',
            params: {
              id: JSON.stringify(params)
            }
          })
        })
        return
      }

      this.oprType = OPR_TYPE.ADD
    },
    handleEdit({ detail }) {
      this.oprType = OPR_TYPE.EDIT
      this.editForm = detail
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.tab-container {
  margin-bottom: 10px;
  /deep/.el-card__body {
    padding: 2px 20px;
  }
  /deep/.el-tabs__nav-wrap::after {
    z-index: -1;
  }
  ::v-deep {
    .el-tabs__header {
      padding: 0 !important;
    }
  }
}
/* 未开通 */
.empty-container {
  padding: 50px 0;
  text-align: center;
  .img {
    margin: 0 auto;
    width: 307px;
    height: 278px;
  }
  .msg {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
  }
}

/* 门店 */
.shop-container {
  display: flex;
  min-height: 78.5vh;
  .left-container {
    flex: 0 0 200px;
    .content{
      min-height: 78.5vh;
    }
  }
  .right-container {
    flex: 1;
    .right-head {
      margin-bottom: 20px;
      .shop-name {
        margin-right: 10px;
        font-size: 20px;
        font-weight: bold;
      }
    }
    .el-textarea,
    .el-select {
      width: 500px;
    }
  }
}

/* 门店列表 */
.menu-box {
  margin-right: 10px;
  background-color: #fff;
  border-radius: 5px;
  min-height: 500px;
  .filter {
    padding: 10px;
  }
  .content {
    font-size: 14px;
    .add-btn {
      width: 100%;
    }
    .item {
      cursor: pointer;
      padding: 10px;
      width: 100%;
    }
    .active {
      color: #fff;
      background-color: $primary;
    }
  }
}

/* 上传 */
.img-list-container {
  margin: 0;
  display: inline;
  vertical-align: top;
  cursor: pointer;
  .img-item {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 150px;
    width: 300px;
    margin: 0 8px 8px 0;
    display: inline-block;
    .handle-icon {
      display: none;
    }
    &:hover {
      font-size: 20px;
      color: #fff;
      .handle-icon {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        .icon {
          margin: 10px;
        }
      }
    }
  }
}
.upload-container ::v-deep {
  .el-upload-dragger {
    width: 298px;
    height: 148px;
  }
  .el-upload--picture-card {
    line-height: 1;
    width: 300px;
    height: 150px;
    border: none;
  }
  .el-upload-list__item {
    width: 300px;
    height: 150px;
  }
}
.slide-enter-active,
.slide-leave-active {
  transition: all .5s;
}

.slide-enter,
.slide-leave-to {
  margin-top: 20px;
}
</style>
